<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24小时天气分析 - {{ city }}</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 确保调试信息默认隐藏 */
        #debug-info {
            display: none !important;
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
            overflow: auto;
            max-height: 200px;
        }
        
        /* 确保图表容器有足够的高度 */
        .chart {
            width: 100%;
            height: 400px;
            min-height: 400px;
        }

        /* 页面特定样式 */
        .page-title {
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 应用容器 -->
    <div class="app-container">
        <!-- 左侧导航栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo"><i class="fas fa-cloud-sun"></i> <span>天气预报系统</span></div>
                <h2>数据分析平台</h2>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/weather1" class="nav-link active">
                        <i class="fas fa-clock"></i>
                        <span>24小时天气分析</span>
                    </a>
                </li>
                <li>
                    <a href="/weather14" id="weather14Link" class="nav-link">
                        <i class="fas fa-calendar-alt"></i>
                        <span>14天天气预报分析</span>
                    </a>
                </li>
            </ul>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <div class="top-bar">
                <div class="city-selector-bar">
                    <span>当前城市：</span>
                    <select id="citySelect">
                        {% for city_name, code in cities.items() %}
                        <option value="{{ city_name }}" {% if city_name == city %}selected{% endif %}>{{ city_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <!-- 内容区域 -->
            <div class="content">
                <h1 class="page-title">24小时天气分析 - {{ city }}</h1>
                
                <div class="analysis-container">
                    <div id="debug-info" style="display:none;"></div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-temperature-high"></i> 温度变化曲线</h2>
                        <div id="temperature-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-tint"></i> 相对湿度变化曲线</h2>
                        <div id="humidity-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-smog"></i> 空气质量变化曲线</h2>
                        <div id="air-quality-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-wind"></i> 风向雷达图</h2>
                        <div id="wind-chart" class="chart"></div>
                    </div>
                    
                    <div class="chart-container">
                        <h2><i class="fas fa-chart-line"></i> 温湿度相关性分析</h2>
                        <div id="correlation-chart" class="chart"></div>
                        <p>温度与相对湿度的相关系数为：<span class="correlation-value">{{ chart_data.corr_value|round(4) }}</span></p>
                    </div>
                </div>

                <footer>
                    <p>© 2024 天气预报数据分析系统</p>
                </footer>
            </div>
        </main>
    </div>

    <script>
        // 城市选择功能
        document.addEventListener('DOMContentLoaded', function() {
            const citySelect = document.getElementById('citySelect');
            const weather14Link = document.getElementById('weather14Link');
            
            // 当选择变化时加载相应城市的数据
            citySelect.addEventListener('change', function() {
                const city = this.value;
                window.location.href = `/weather1?city=${encodeURIComponent(city)}`;
            });

            // 更新其他导航链接
            const city = citySelect.value;
            weather14Link.href = `/weather14?city=${encodeURIComponent(city)}`;
        });
    
        // 调试信息 - 输出接收到的数据
        let chartData;
        try {
            chartData = JSON.parse('{{ chart_data|tojson|safe }}');
            document.getElementById('debug-info').textContent = JSON.stringify(chartData, null, 2);
            // 开发环境下可以显示调试信息，生产环境请注释下面这行
            // document.getElementById('debug-info').style.display = 'block';
            console.log('Chart data received:', chartData);
        } catch (error) {
            console.error('Error parsing chart data:', error);
            document.getElementById('debug-info').textContent = 'Error parsing chart data: ' + error.message;
            document.getElementById('debug-info').style.display = 'block';
            // 设置默认图表数据，确保页面不会崩溃
            chartData = {
                tem: {
                    xAxis: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                    series: [{
                        name: '温度',
                        type: 'line',
                        data: [15, 16, 16, 15, 15, 14, 13, 14, 16, 18, 20, 21, 22, 23, 22, 21, 20, 19, 18, 17, 16, 15, 15, 14],
                        markPoint: {data: []},
                        markLine: {data: [{type: 'average', name: '平均温度'}]}
                    }],
                    min: 10,
                    max: 25
                },
                hum: {
                    xAxis: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                    series: [{
                        name: '相对湿度',
                        type: 'line',
                        data: [80, 82, 84, 85, 86, 86, 85, 84, 80, 75, 70, 65, 60, 55, 58, 62, 65, 68, 72, 75, 78, 80, 82, 83],
                        markPoint: {data: []},
                        markLine: {data: [{type: 'average', name: '平均湿度'}]}
                    }],
                    min: 50,
                    max: 90
                },
                air: {
                    xAxis: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                    series: [{
                        name: '空气质量',
                        type: 'bar',
                        data: [50, 52, 55, 58, 60, 62, 63, 65, 68, 70, 72, 70, 68, 65, 60, 58, 55, 52, 50, 48, 46, 45, 47, 49],
                        markPoint: {data: []},
                        markLine: {data: [{type: 'average', name: '平均值'}]}
                    }],
                    colors: Array(24).fill('#90EE90'),
                    min: 0,
                    max: 80
                },
                wind: {
                    indicator: [
                        {name: "东北风", max: 3}, {name: "东风", max: 3}, {name: "东南风", max: 3}, {name: "南风", max: 3},
                        {name: "西南风", max: 3}, {name: "西风", max: 3}, {name: "西北风", max: 3}, {name: "北风", max: 3}
                    ],
                    data: [1, 1, 1, 1, 1, 1, 1, 1]
                },
                corr: {
                    x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
                    tem: [15, 16, 16, 15, 15, 14, 13, 14, 16, 18, 20, 21, 22, 23, 22, 21, 20, 19, 18, 17, 16, 15, 15, 14],
                    hum: [80, 82, 84, 85, 86, 86, 85, 84, 80, 75, 70, 65, 60, 55, 58, 62, 65, 68, 72, 75, 78, 80, 82, 83]
                },
                corr_value: -0.95
            };
        }
        
        // 等待DOM加载完成后再初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 检查图表容器是否存在
            if (!document.getElementById('temperature-chart') || 
                !document.getElementById('humidity-chart') || 
                !document.getElementById('air-quality-chart') || 
                !document.getElementById('wind-chart') || 
                !document.getElementById('correlation-chart')) {
                console.error('无法找到图表容器元素');
                return;
            }
            
            // 设置ECharts全局主题
            const chartTheme = {
                color: ['#1976D2', '#2ecc71', '#f39c12', '#e74c3c', '#9b59b6', '#1abc9c'],
                backgroundColor: '#fff',
                textStyle: {
                    fontFamily: 'Microsoft YaHei'
                }
            };
            
            try {
                // 初始化温度图表
                const temperatureChart = echarts.init(document.getElementById('temperature-chart'));
                const temperatureOption = {
                    title: {
                        text: '一天温度变化曲线图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}时 {c}°C'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {title: '保存为图片'}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: chartData.tem.xAxis.map(h => h + '时'),
                        axisLabel: {
                            interval: 2
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '温度 (°C)',
                        min: chartData.tem.min,
                        max: chartData.tem.max
                    },
                    series: chartData.tem.series
                };
                temperatureChart.setOption(temperatureOption);
                
                // 初始化湿度图表
                const humidityChart = echarts.init(document.getElementById('humidity-chart'));
                const humidityOption = {
                    title: {
                        text: '一天相对湿度变化曲线图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}时 {c}%'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {title: '保存为图片'}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: chartData.hum.xAxis.map(h => h + '时'),
                        axisLabel: {
                            interval: 2
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '相对湿度 (%)',
                        min: chartData.hum.min,
                        max: chartData.hum.max
                    },
                    series: chartData.hum.series
                };
                humidityChart.setOption(humidityOption);
                
                // 初始化空气质量图表
                const airQualityChart = echarts.init(document.getElementById('air-quality-chart'));
                const airQualityOption = {
                    title: {
                        text: '一天空气质量变化柱状图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}时 空气质量指数: {c}'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {title: '保存为图片'}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: chartData.air.xAxis.map(h => h + '时'),
                        axisLabel: {
                            interval: 2
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '空气质量指数',
                        min: chartData.air.min,
                        max: chartData.air.max
                    },
                    series: [
                        {
                            name: '空气质量',
                            type: 'bar',
                            data: chartData.air.series[0].data,
                            itemStyle: {
                                color: function(params) {
                                    return chartData.air.colors[params.dataIndex];
                                }
                            },
                            markPoint: chartData.air.series[0].markPoint,
                            markLine: chartData.air.series[0].markLine
                        }
                    ],
                };
                airQualityChart.setOption(airQualityOption);
                
                // 初始化风向雷达图
                const windChart = echarts.init(document.getElementById('wind-chart'));
                const windOption = {
                    title: {
                        text: '风向雷达图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        data: ['风频率'],
                        top: 30
                    },
                    radar: {
                        indicator: chartData.wind.indicator,
                        shape: 'circle',
                        splitNumber: 4,
                    },
                    series: [{
                        name: '风频率',
                        type: 'radar',
                        data: [{
                            value: chartData.wind.data,
                            name: '风频率',
                            areaStyle: {
                                color: 'rgba(25, 118, 210, 0.4)'
                            },
                            lineStyle: {
                                color: '#1976D2',
                                width: 2
                            },
                            itemStyle: {
                                color: '#1976D2'
                            }
                        }]
                    }]
                };
                windChart.setOption(windOption);
                
                // 初始化温湿度相关性分析散点图
                const correlationChart = echarts.init(document.getElementById('correlation-chart'));
                const correlationOption = {
                    title: {
                        text: '温湿度相关性散点图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return `温度: ${params.data[0]}°C<br>湿度: ${params.data[1]}%`;
                        }
                    },
                    xAxis: {
                        name: '温度 (°C)',
                        nameLocation: 'middle',
                        nameGap: 25
                    },
                    yAxis: {
                        name: '相对湿度 (%)',
                        nameLocation: 'middle',
                        nameGap: 30
                    },
                    series: [{
                        type: 'scatter',
                        symbolSize: 12,
                        data: chartData.corr.tem.map(function(value, index) {
                            return [value, chartData.corr.hum[index]];
                        }),
                        itemStyle: {
                            color: function(params) {
                                // 根据温度值设置不同颜色
                                const temp = params.data[0];
                                if (temp < 10) return '#9b59b6';  // 紫色: 冷
                                if (temp < 20) return '#3498db';  // 蓝色: 凉
                                if (temp < 25) return '#2ecc71';  // 绿色: 舒适
                                if (temp < 30) return '#f39c12';  // 黄色: 热
                                return '#e74c3c';                 // 红色: 非常热
                            }
                        }
                    }]
                };
                correlationChart.setOption(correlationOption);
            } catch (e) {
                console.error('图表初始化失败:', e);
                document.getElementById('debug-info').textContent = '图表初始化失败: ' + e.message;
                document.getElementById('debug-info').style.display = 'block';
            }
            
            // 响应窗口大小变化，重新调整图表大小
            window.addEventListener('resize', function() {
                try {
                    temperatureChart.resize();
                    humidityChart.resize();
                    airQualityChart.resize();
                    windChart.resize();
                    correlationChart.resize();
                } catch (e) {
                    console.error('图表调整大小失败:', e);
                }
            });
        });
    </script>
</body>
</html> 